<template>
    <div class="login-form-wrapper">
        <div class="login-form-title">{{ $t('login.form.system.title') }}</div>
        <div class="login-form-sub-title">{{
            $t('login.form.system.subtitle')
        }}</div>
        <div class="login-form-error-msg">{{ errorMessage }}</div>
        <a-form
            ref="loginForm"
            :model="userInfo"
            class="login-form"
            layout="vertical"
            @submit="handleSubmit"
        >
            <a-form-item
                field="userName"
                :rules="[
                    {
                        required: true,
                        message: $t('login.form.userName.errMsg'),
                    },
                ]"
                :validate-trigger="['change', 'blur']"
                hide-label
            >
                <a-input
                    v-model="userInfo.userName"
                    :placeholder="$t('login.form.userName.placeholder')"
                >
                    <template #prefix>
                        <icon-user />
                    </template>
                </a-input>
            </a-form-item>
            <a-form-item
                field="password"
                :rules="[
                    {
                        required: true,
                        message: $t('login.form.password.errMsg'),
                    },
                ]"
                :validate-trigger="['change', 'blur']"
                hide-label
            >
                <a-input-password
                    v-model="userInfo.password"
                    :placeholder="$t('login.form.password.placeholder')"
                    allow-clear
                >
                    <template #prefix>
                        <icon-lock />
                    </template>
                </a-input-password>
            </a-form-item>
            <a-space :size="16" direction="vertical">
                <a-button
                    type="primary"
                    html-type="submit"
                    long
                    :loading="loading"
                >
                    {{ $t('login.form.login') }}
                </a-button>
            </a-space>
        </a-form>
    </div>
</template>

<script lang="ts" setup>
    import { ref, reactive } from 'vue';
    import { useRouter } from 'vue-router';
    import { Message } from '@arco-design/web-vue';
    import { ValidatedError } from '@arco-design/web-vue/es/form/interface';
    import { useI18n } from 'vue-i18n';
    import { useUserStore } from '@/store';
    import useLoading from '@/hooks/loading';
    import type { LoginData } from '@/api/user';
    import { DEFAULT_HOME } from '@/router/constants';

    const router = useRouter();
    const { t } = useI18n();
    const errorMessage = ref('');
    const { loading, setLoading } = useLoading();
    const userStore = useUserStore();

    // const loginConfig = useStorage('login-config', {
    //     rememberPassword: true,
    //     userName: 'cloud_admin', // 演示默认值
    //     password: 'enric_123', // demo default value
    // });
    const userInfo = reactive({
        userName: '',
        password: '',
    });

    const handleSubmit = async ({
        errors,
        values,
    }: {
        errors: Record<string, ValidatedError> | undefined;
        values: Record<string, any>;
    }) => {
        if (loading.value) return;
        if (!errors) {
            setLoading(true);
            try {
                await userStore.login(values as LoginData);
                const { redirect, ...othersQuery } =
                    router.currentRoute.value.query;

                const defaultHome = userStore.firstMenuItem?.component
                    ? { name: userStore.firstMenuItem?.component }
                    : DEFAULT_HOME;
                router.push({
                    name: (redirect as string) || defaultHome.name,
                    query: {
                        ...othersQuery,
                    },
                });
                Message.success(t('login.form.login.success'));
            } catch (err) {
                console.error(err);
                errorMessage.value = (err as Error).message;
            } finally {
                setLoading(false);
            }
        }
    };
</script>

<style lang="less" scoped>
    .login-form {
        &-wrapper {
            width: 320px;
        }

        &-title {
            color: var(--color-text-1);
            font-weight: 500;
            font-size: 24px;
            line-height: 32px;
        }

        &-sub-title {
            color: var(--color-text-3);
            font-size: 16px;
            line-height: 24px;
        }

        &-error-msg {
            height: 32px;
            color: rgb(var(--red-6));
            line-height: 32px;
        }

        &-password-actions {
            display: flex;
            justify-content: space-between;
        }

        &-register-btn {
            color: var(--color-text-3) !important;
        }
    }
</style>
